﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="refresh" content="5,url=main.jsp"></meta>
		<title></title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/main.css" />
		 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        #slider {
            width: 750px;
            height: 320px;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 100px auto;
            position: relative;
        }

        #top {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        #top ul {
            width: 4500px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #top ul li {
            width: 750px;
            height: 320px;
            float: left;
        }

        #slider ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #slider ol li {
            width: 20px;
            height: 20px;
            background-color: darkgray;
            display: inline-block;
            margin-right: 3px;
            border-radius: 50%;
            cursor: pointer;
        }

        #slider ol li.current {
            background-color: orangered;
        }
    </style>
	</head>

	<body>
	<div id="slider">
    <div id="top">
        <ul id="ul">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
    </div>
    <ol id="ol">
    </ol>
</div>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var lis = $("ul").children;
        var currentIndex = 0, indicatorIndex = 0;

        // 2. 克隆li标签
        $("ul").appendChild(lis[0].cloneNode(true));

        // 3. 动态创建页码
        for (var i = 0; i < lis.length - 1; i++) {
            var li = document.createElement("li");
            $("ol").appendChild(li);
        }

        // 4. 第一个选中
        $("ol").children[0].className = "current";

        // 5.鼠标进入圆点
        var olLis = $("ol").children;
        for (var j = 0; j < olLis.length; j++) {
            (function (j) {
                // 5.1 获取单独的li标签
                var li = olLis[j];

                // 5.2 鼠标进入
                li.onmouseover = function () {
                    for (var i = 0; i < olLis.length; i++) {
                        olLis[i].className = "";
                    }

                    this.className = "current";

                    // 5.3 动起来
                    constant($("ul"), -(750 * j), 100);
                    currentIndex = indicatorIndex = j;
                };
            })(j);
        }

        // 6.自动轮播
        var timer = setInterval(autoPlay, 1000);


        // 7. 清除和设置定时器
        $("slider").onmouseover = function () {
            clearInterval(timer);
        };

        $("slider").onmouseout = function () {
            timer = setInterval(autoPlay, 1000);
        };


        function autoPlay() {
            // 6.1 ul滚起来
            currentIndex++;
            if (currentIndex > lis.length - 1) {
                $("ul").style.left = 0;
                currentIndex = 1;
            }
            constant($("ul"), -currentIndex * 750, 100);

            // 6.2 指示器滚起来
            indicatorIndex++;
            if (indicatorIndex > olLis.length - 1) {
                indicatorIndex = 0;
            }
            for (var i = 0; i < olLis.length; i++) {
                olLis[i].className = "";
            }

            olLis[indicatorIndex].className = "current";

        }
    }
</script>
		<div class="admin-main">
			<blockquote class="layui-elem-quote">
				<h2 style="color: #01AAED;">公司简介和和作流程</h2>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>公司简介</legend>
				<div class="layui-field-box">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>公司的由来</legend>
                        <div class="layui-field-box">
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;蓝天租车有限公司是以汽车租赁为主营业务的有限公司。成立于2019年11月15日，总部地点位于河南省郑州市。
							结合中国客户的消费习惯，为广大消费者提供短租、长租及融资租赁等专业化的汽车租赁。</p>
                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>租车宗旨</legend>
                        <div class="layui-field-box">
							<p>1、公司宗旨：诚实 守信 专业 敬业</p>
							<p>2、公司理念：一对一顾问式服务，满足不同用车需求</p>
							<p>3、公司承诺：优质车辆，精湛技术，星级服务，安全保障</p>
							<p>4、丰永通精神：力竭所能，奉献真诚的经营理念，用心服务于我们尊贵的客户，公司全体员工的良好的服务意识等。</p>
							<p>5、经营目标：树立中国汽车租赁行业典范。</p>
							<p>6、经营理念：以人为本 和谐发展 诚信经营 。</p>
							<p>7、经营方针：让我们的顾客以最合理的价格享受最优质的服务。</p>
							<p>8、真诚的愿与你携手一道，竭诚合作，共创美好明天！</p>
                        </div>
                    </fieldset>
					<fieldset class="layui-elem-field layui-field-title">
						<legend>租车规则</legend>
						<div class="layui-field-box">
							<p>1、用户注册完成后，需对个人信息进行完善，否则不能租车！</p>
							<p>2、通过绑定的个人银行卡，对该用户的的账号进行充值！</p>
							<P>3、每个手机号只能注册一个账号，每个账号一次只能租赁一辆车！将车辆归还后，才可以继续租赁车辆！</p>	
							<P>4、租车前须现在租车时间一天,两天,三天,一星期或一个月，每天租车费用，200元/天，300元/天等（仅供参考）！</p>
							<P>5、在租车期限之前还车，不退钱，超过所选租车时间，除了应付超出时间的金额，还每天多付20元处罚的违约金！</p>
						</div>
					</fieldset>
				</div>
			</fieldset>
		</div>
	</body>
	
</html>